<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"  xmlns:layout="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="webjars/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/bootstrap-table-master/dist/bootstrap-table.min.css">
    <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">
    <script src="webjars/jquery/3.0.0/jquery.min.js"></script>
    <script src="webjars/bootstrap/4.4.1/js/bootstrap.min.js"></script>

</head>

<body>
<div style="position: fixed;background-color: #eccc68;z-index: 1;width: 100%"><h1 class="display-2">this is a head</h1><button class="btn btn-light" style="float: right">退出登录</button></div>
<nav class="navbar navbar-expand-lg navbar-light bg-light"></nav>
<div style="background-color: red;height: 100%;width: 120px;position:fixed;top: 151.6px;" id="nav">
    <h2>this is nav</h2>
    <ul>
        <li><a th:href="@{../student/selectAll}">??</a></li>
        <li><a th:href="@{../student/addStudent}">添加学生</a></li>
    </ul>
</div>
<div class="container" layout:fragment="content" style="background-color: #45aaf2;width: 80%;position: relative;top: 120px"></div>


<script src="/static/bootstrap-table-master/dist/bootstrap-table.min.js"></script>
<script src="/static/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
    //当窗口改变后执行的函数
    $(window).resize(function(){
        //文档可视化宽度  我的电脑显示器 1519
        console.log(document.body.clientWidth);
        //文档可视化高度  我的电脑显示器 16
        console.log(document.body.clientHeight);
        if (document.body.clientWidth <= 650) {
            $('#nav').css("display","none")
        }
    })
</script>
</body>
</html>
